﻿@{
    ViewBag.Title = "ImageSelect";
    Layout = "~/Views/Shared/_LayoutBlank.cshtml";
}

@*@Scripts.Render("~/Scripts/jquery.form.js")*@

<script>

    //当前页
    var _currentPage = 1;

    $(document).ready(function ()
    {
        loadData();
    });

    function loadData(targetPage)
    {
        var loadLayerIndex = layer.load(0, {
            shade: [0.2, '#fff']
        });

        var args = new Object();
        args.Page = targetPage || 1;
        args.Type = "image";

        $.ajax({
            url: "/Api/Material/GetNormalMaterialList",
            type: "POST",
            dataType: "json",
            data: JSON.stringify(args),
            success: function (data, status, jqXHR)
            {
                // alert(data);

                layer.close(loadLayerIndex);
                if (data.Success)
                {
                    var resultObj = data.Data;

                    _currentPage = resultObj.Page;

                    //alert(JSON.stringify(resultObj));
                    var gettpl = document.getElementById('tableTemplate').innerHTML;
                    laytpl(gettpl).render(resultObj.ItemList, function (html)
                    {
                        document.getElementById('divTableBodyContainer').innerHTML = html;
                        //fitTable();
                    });

                    laypage({
                        skin: 'yahei',
                        cont: document.getElementById('divPagingContainer'),
                        pages: resultObj.TotalPage, //总页数
                        curr: resultObj.Page, //当前页
                        groups: 7, //连续显示分页数
                        jump: function (obj, first)
                        {
                            if (!first)
                            { //点击跳页触发函数自身，并传递当前页：obj.curr
                                loadData(obj.curr);
                            }
                        }
                    });

                } else
                {
                    layerAlert(data.Message);
                }
            },
            error: function (xmlHttpRequest)
            {
                layer.close(loadLayerIndex);
                alert("Error: " + xmlHttpRequest.status);
            }
        });
    }

    function uploadFile()
    {

        fileUploadArgs = new Object();
        fileUploadArgs.uploadMethod = "UploadToWeixinMaterial";
        fileUploadArgs.getUploadResultApi = "/Api/Settings/GetUploadToWeixinMaterialResult?fileId={0}&type=image";

        __showFileUpload(getUploadResult, fileUploadArgs);
    }

    function getUploadResult(fileServiceAddress, result)
    {

        if (result.Success)
        {
            window.location.reload();
        }

        //var url = __fileServiceAddress + result.StoreFilePath;
        //alert(url);
    }

    function selectImage(id, name, mediaId, url)
    {
        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引

        var image = new Object();
        image.Id = id;
        image.Name = name;
        image.MediaId = mediaId;
        image.Url = url;

        parent.__selectMaterialImageResult(image, index);
    }

    function cancel()
    {
        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        parent.layer.close(index); //再执行关闭
    }

</script>

<script id="tableTemplate" type="text/html">
    {{# for(var i = 0, len = d.length; i < len; i++){ }}

    <div class="divImageMaterialContainer" onclick="selectImage('{{ d[i].Id }}','{{ d[i].Name }}','{{ d[i].MediaId }}','{{ d[i].Url }}')">
        <table class="tableImageMaterialContainer">
            <tr>
                <td height="120" align="center"><img style="max-width:148px; max-height:100%" src="{{ d[i].Url }}" /></td>
            </tr>
            <tr>
                <td height="30" style="word-wrap: break-word; word-break: break-all; ">
                    <span class="font_gray_15" style="margin-left: 10px;">{{ d[i].Name }}</span>
                </td>
            </tr>@*
                <tr>
                    <td height="30" valign="middle" bgcolor="#F4F5F9">
                        <div>
                            <div style="float: left; margin-left: 10px;">
                                        <img src="/Content/Images/ico_edit.jpg" width="20" height="20">
                                    </div>
                                <div style="float: right; margin-right: 10px;">
                                    <img src="/Content/Images/ico_remove.jpg" width="20" height="20" onclick="removeData('{{ d[i].Id }}','{{ d[i].MediaId }}')">
                                </div>
                                    <div style="clear: both"></div>
                                </div>
                            </td>
                        </tr>*@
        </table>

    </div>
    {{# } }}

    <div style="clear: both"></div>

</script>


<style type="text/css">
    .divImageMaterialContainer {
        width: 150px;
        float: left;
        margin-right: 20px;
        margin-top: 20px;
        background-color: #FFF;
        cursor: pointer;
    }

    .tableImageMaterialContainer {
        width: 100%;
        border-collapse: collapse;
        border: solid #E7E7EB;
        border-width: 1px 0 0 1px;
    }

        .tableImageMaterialContainer td {
            border: 1px solid #E7E7EB;
        }
</style>


<div style="margin-left:20px; margin-right:20px; margin-top:20px;">
    <span id="spanTitle" class="font_black_24">选择图片</span>
</div>

<div style=" background-color:#ccc; margin-left:20px; margin-right:20px; margin-top:10px; height:1px;">

</div>

<div style=" position:absolute; overflow:auto ;margin-top:30px;left:30px; right:30px; bottom:58px; top:36px; ">

    <div id="divTableBodyContainer">


    </div>


    <div id="divPagingContainer" style="margin-top: 20px; text-align: right;">
        paging
    </div>

</div>


<div style=" background-color:#ccc; position:absolute; bottom:55px; left:20px;right:20px; height:1px;">

</div>

<div style="position:absolute; bottom:15px; left:20px;right:20px;">

    <div style="float:left;">
        <input name="btnSave" type="button" class="btn_green" id="btnSave" value="上 传" onclick="uploadFile()" />
    </div>

    <div style="float:right">
        <input name="btnCancel" type="button" class="btn_blue" id="btnCancel" value="取消" onclick="cancel()" />
    </div>
    <div style="clear:both">
    </div>
</div>

@Helpers.FileUpload()